{% extends "base.html" %}

{% block content %}


{% load categories %}


<div class="page-header">

    <div class="row-fluid">
        <div class="span4"><h2>Používatelia</h2></div>
        <div class="span8">
            
        </div>
    </div>
    
</div>

{% if user_list %}

    <div class="row-fluid">
	<div class="tabbable">
	    <div class="span2">
		<ul class="nav nav-list">
		    <li class="nav-header">Podľa kategórie</li>
		    
		    {% if category_list %}
		    
			{% for cat in category_list.keys %}
			    <li><a href="#cat{{cat.id}}" data-toggle="tab" onclick="Dajaxice.accounts.filter_category_advanced(hide_cat{{cat.id}}_users_ajax, {'text':$('#cat{{cat.id}}_search_user').val(), 'min_points':'0' ,'cat':'{{cat.id}}'});">{{cat.name}}</a></li>
			{% endfor %}
		    
		    {% endif %}
		    
		    <li class="nav-header">Iné</li>
		    
		    {% if category_list %}
			<li><a href="#nocategory" data-toggle="tab" onclick="Dajaxice.accounts.filter_nocat_advanced(hide_nocat_users_ajax, {'text':$('#nocat_search_user').val(), 'min_points':'0'});" >Bez kategórie</a></li>
		    {% endif %}
		    
		    <li class="active"><a href="#all" data-toggle="tab" style="color:lightblue;">Všetci</a></li>
		    
		    {% if user.is_authenticated %}
			<li><a href="#friends" data-toggle="tab" onclick="Dajaxice.accounts.filter_friends_advanced(hide_friends_users_ajax, {'text':$('#friends_search_user').val(), 'min_points':'0'});">Priatelia</a></li>
		    {% endif %}
		</ul>
	    </div>
	    <div class="tab-content">
		{% if category_list %}
		    
			{% for cat in category_list.keys %}
			
			    <div class="tab-pane" id="cat{{cat.id}}">
				<div class="span10" style="margin-left:20px;">
				    <h3>{{cat.name}}</h3>
				    
				    <script type="text/javascript">

					function hide_cat{{cat.id}}_users_ajax(data) {
					    $('.cat{{cat.id}}_user_row').css('display', 'none');
					    
					    var splitList = data.users.split(',');
					    
					    if (splitList.length == 1) {
						$('#cat{{cat.id}}_no_users').css('display','block');
						$('#cat{{cat.id}}_user_table').css('display','none');
					    } else {
						$('#cat{{cat.id}}_no_users').css('display','none');
						$('#cat{{cat.id}}_user_table').css('display','table');
						for (var i = 0; i < splitList.length; i++) {
						    $('#cat{{cat.id}}_row_' + splitList[i]).css('display', 'table-row');
						}
					    }
					}

					$(document).ready(function() {
					    $('#cat{{cat.id}}_search_user').keyup(function() {
						Dajaxice.accounts.filter_category_advanced(hide_cat{{cat.id}}_users_ajax, {'text':$('#cat{{cat.id}}_search_user').val(), 'min_points':'0' ,'cat':'{{cat.id}}'});
					    });
					    $('#cat{{cat.id}}_search_points').keyup(function() {
					        var value = $('#cat{{cat.id}}_search_points').val();
					        if (value == '' ) {value = '0';}
						Dajaxice.accounts.filter_category_advanced(hide_cat{{cat.id}}_users_ajax, {'text':$('#cat{{cat.id}}_search_user').val(), 'min_points':value ,'cat':'{{cat.id}}'});
					    });
					});
				    </script>
				    
				    <div class="form-inline pull-right" style="margin-left: 10px; margin-top:-50px;" action="">
			
					<div class="row-fluid">
					    <div id="cat{{cat.id}}_advanced_search" class="collapse pull-right" style="margin-bottom:10px;margin-top:-10px;">
						<div class="input-prepend input-append">
						    <span class="add-on">Nazbieral aspoň</span>
						    <input id="cat{{cat.id}}_search_points" type="text" placeholder="0" class="input-mini" value="0">
						    <span class="add-on">bodov</span>
						</div>
					    </div>
					</div>
				    
					<div class="input-prepend input-append">
					    <span class="add-on"><i class="icon-search"></i></span>
					    <input  id="cat{{cat.id}}_search_user" autocomplete="off" type="text" class="search-query" placeholder="Hľadať používateľa...">
					    
					    <span class="btn" data-toggle="collapse" data-target="#cat{{cat.id}}_advanced_search">Rozšírené</span>
					</div>
				    </div>
				    
				    <br />
				    
				    <p id="cat{{cat.id}}_no_users" style="display:none;">Žiadna zhoda.</p>
				    
				    <script type="text/javascript">
					$(document).ready(function(){ 
					    $("#cat{{cat.id}}_user_table").tablesorter(); 
					}); 
				    </script>
				    
				    <table id="cat{{cat.id}}_user_table" class='table tablesorter table-striped table-bordered'>
					<thead>
						<tr>
						    <th>Používateľ</th>
						    <th>Počet bodov</th>
						    <th>Vytvorené</th>
						    <th>Splnené</th>
						</tr>
					<tbody>
					{% for usr, dict in user_list.iteritems %}
					<tr class="cat{{cat.id}}_user_row" id="cat{{cat.id}}_row_{{usr.user.username}}" style="display:table-row;">
					    <td><a href="{% url show_user user_id=usr.user.username %}">{{ usr.user.username }}</a>
					    {% if user.is_authenticated and not user == usr.user %}
						{% if not dict.friends %}
						    <a href="{% url add_friend user_id=usr.user.username %}">
							<button class="btn btn-mini"><i class="icon-plus-sign icon-white"></i></button>
						    </a>
						{% else %}
						    <a href="{% url remove_friend user_id=usr.user.username %}">
							<button class="btn btn-mini pull-right"><i class="icon-remove-sign icon-white"></i></button>
						    </a>
						{% endif %}
						<a href="{% url message_friend user_id=usr.user.username %}">
						    <button class="btn btn-mini"><i class="icon-envelope icon-white"></i></button>
						</a>
					    {% endif %}
					    </td>
					    <td><span class="badge badge-info">{% get_catpoints usr cat %}/{{ usr.user_points }}</span>
						bodov
					    </td>
					    
					    <td><span class="badge">{% get_achicatmade_count usr cat %}/{{ dict.countmade }}</span>
						achievementov
					    </td>
					
					    <td><span class="badge">{% get_achicatdone_count usr cat %}/{{ dict.countdone }}</span>
						achievementov
					    </td>
					</tr>
					{% endfor %}
					</tbody>
				    </table>
				</div>
			    </div>

			{% endfor %}
		    
		    <div class="tab-pane" id="nocategory">
			<div class="span10" style="margin-left:20px;">
			    <h3>Bez kategórie</h3>
			    
			    <script type="text/javascript">

				function hide_nocat_users_ajax(data) {
				    $('.nocat_user_row').css('display', 'none');

				      var splitList = data.users.split(',');
				      
				      if (splitList.length == 1) {
					  $('#nocat_no_users').css('display','block');
					  $('#nocat_user_table').css('display','none');
				      } else {
					  $('#nocat_no_users').css('display','none');
					  $('#nocat_user_table').css('display','table');
					  for (var i = 0; i < splitList.length; i++) {
					      $('#nocat_row_' + splitList[i]).css('display', 'table-row');
					  }
				      }
				    
				}

				$(document).ready(function() {
				    $('#nocat_search_user').keyup(function() {
					Dajaxice.accounts.filter_nocat_advanced(hide_nocat_users_ajax, {'text':$('#nocat_search_user').val(), 'min_points':'0'});
				    });
				    $('#nocat_search_points').keyup(function() {
					var value = $('#nocat_search_points').val();
					if (value == '' ) {value = '0';}
					Dajaxice.accounts.filter_nocat_advanced(hide_nocat_users_ajax, {'text':$('#nocat_search_user').val(), 'min_points':value});
				    });
				});
			    </script>
			    
			    <div class="form-inline pull-right" style="margin-left: 10px; margin-top:-50px;" action="">
		
				<div class="row-fluid">
				    <div id="nocat_advanced_search" class="collapse pull-right" style="margin-bottom:10px;margin-top:-10px;">
					<div class="input-prepend input-append">
					    <span class="add-on">Nazbieral aspoň</span>
					    <input id="nocat_search_points" type="text" placeholder="0" class="input-mini" value="0">
					    <span class="add-on">bodov</span>
					</div>
				    </div>
				</div>
			    
				<div class="input-prepend input-append">
				    <span class="add-on"><i class="icon-search"></i></span>
				    <input  id="nocat_search_user" autocomplete="off" type="text" class="search-query" placeholder="Hľadať používateľa...">
				    
				    <span class="btn" data-toggle="collapse" data-target="#nocat_advanced_search">Rozšírené</span>
				</div>
			    </div>
			    
			    <br />
			    
			    <p id="nocat_no_users" style="display:none;">Žiadna zhoda.</p>
			    
			    <script type="text/javascript">
				$(document).ready(function(){ 
				    $("#nocat_user_table").tablesorter(); 
				}); 
			    </script>
			    
			    <table id="nocat_user_table" class='table tablesorter table-striped table-bordered'>
				<thead>
					<tr>
					    <th>Používateľ</th>
					    <th>Počet bodov</th>
					    <th>Vytvorené</th>
					    <th>Splnené</th>
					</tr>
				<tbody>
				{% for usr, dict in user_list.iteritems %}
				<tr class="nocat_user_row" id="nocat_row_{{usr.user.username}}" style="display:table-row;">
				    <td><a href="{% url show_user user_id=usr.user.username %}">{{ usr.user.username }}</a>
				    {% if user.is_authenticated and not user == usr.user %}
					{% if not dict.friends %}
					    <a href="{% url add_friend user_id=usr.user.username %}">
						<button class="btn btn-mini"><i class="icon-plus-sign icon-white"></i></button>
					    </a>
					{% else %}
					    <a href="{% url remove_friend user_id=usr.user.username %}">
						<button class="btn btn-mini pull-right"><i class="icon-remove-sign icon-white"></i></button>
					    </a>
					{% endif %}
					<a href="{% url message_friend user_id=usr.user.username %}">
					    <button class="btn btn-mini"><i class="icon-envelope icon-white"></i></button>
					</a>
				    {% endif %}
				    </td>
				    <td><span class="badge badge-info">{% get_nocatpoints usr %}/{{ usr.user_points }}</span>
					bodov
				    </td>
				    
				    <td><span class="badge">{% get_achinocatmade_count usr %}/{{ dict.countmade }}</span>
					achievementov
				    </td>
				
				    <td><span class="badge">{% get_achinocatdone_count usr %}/{{ dict.countdone }}</span>
					achievementov
				    </td>
				</tr>
				{% endfor %}
				</tbody>
			    </table>
			</div>
		    </div>

		    
		    {% endif %}
	    
		<div class="tab-pane active" id="all">
		    <div class="span10" style="margin-left:20px;">
			<h3>Všetci</h3>
			
			<script type="text/javascript">

			    function hide_all_users_ajax(data) {
				$('.all_user_row').css('display', 'none');
				
				var splitList = data.users.split(',');
				
				if (splitList.length == 1) {
				    $('#all_no_users').css('display','block');
				    $('#all_user_table').css('display','none');
				} else {
				    $('#all_no_users').css('display','none');
				    $('#all_user_table').css('display','table');
				    for (var i = 0; i < splitList.length; i++) {
					$('#all_row_' + splitList[i]).css('display', 'table-row');
				    }
				}
			    }

			    $(document).ready(function() {
				    $('#all_search_user').keyup(function() {
					Dajaxice.accounts.filter_users_advanced(hide_all_users_ajax, {'text':$('#all_search_user').val(), 'min_points':'0'});
				    });
				    $('#all_search_points').keyup(function() {
					var value = $('#all_search_points').val();
					if (value == '') {value = '0';}
					Dajaxice.accounts.filter_users_advanced(hide_all_users_ajax, {'text':$('#all_search_user').val(), 'min_points':value});
				    });
				});
			</script>
			
			<div class="form-inline pull-right" style="margin-left: 10px; margin-top:-50px;" action="">
            
			    <div class="row-fluid">
				<div id="all_advanced_search" class="collapse pull-right" style="margin-bottom:10px;margin-top:-10px;">
				    <div class="input-prepend input-append">
					<span class="add-on">Nazbieral aspoň</span>
					<input id="all_search_points" type="text" placeholder="0" class="input-mini" value="0">
					<span class="add-on">bodov</span>
				    </div>
				</div>
			    </div>
			
			    <div class="input-prepend input-append">
				<span class="add-on"><i class="icon-search"></i></span>
				<input  id="all_search_user" autocomplete="off" type="text" class="search-query" placeholder="Hľadať používateľa...">
				
				<span class="btn" data-toggle="collapse" data-target="#all_advanced_search">Rozšírené</span>
			    </div>
			</div>
			
			<br />
			
			<p id="all_no_users" style="display:none;">Žiadna zhoda.</p>
			
			<script type="text/javascript">
			    $(document).ready(function(){ 
				$("#all_user_table").tablesorter(); 
			    }); 
			</script>
			
			<table id="all_user_table" class='table tablesorter table-striped table-bordered'>
			    <thead>
				    <tr>
					<th>Používateľ</th>
					<th>Počet bodov</th>
					<th>Vytvorené</th>
					<th>Splnené</th>
				    </tr>
			    <tbody>
			    {% for usr, dict in user_list.iteritems %}
			    <tr class="all_user_row" id="all_row_{{usr.user.username}}" style="display:table-row;">
				<td><a href="{% url show_user user_id=usr.user.username %}">{{ usr.user.username }}</a>
				{% if user.is_authenticated and not user == usr.user %}
				    {% if not dict.friends %}
					<a href="{% url add_friend user_id=usr.user.username %}">
					    <button class="btn btn-mini"><i class="icon-plus-sign icon-white"></i></button>
					</a>
				    {% else %}
					<a href="{% url remove_friend user_id=usr.user.username %}">
					    <button class="btn btn-mini pull-right"><i class="icon-remove-sign icon-white"></i></button>
					</a>
				    {% endif %}
				    <a href="{% url message_friend user_id=usr.user.username %}">
					<button class="btn btn-mini"><i class="icon-envelope icon-white"></i></button>
				    </a>
				{% endif %}
				</td>
				<td><span class="badge badge-info">{{ usr.user_points }}</span>
				    {% if usr.user_points == 1 %}bod
				    {% elif usr.user_points >= 2 and usr.user_points <= 4 %}body
				    {% else %}bodov
				    {% endif %}
				</td>
				
				<td><span class="badge">{{ dict.countmade }}</span>
				    {% if dict.countmade == 1 %}achievement
				    {% elif dict.countmade >= 2 and dict.countmade <= 4 %}achievementy
				    {% else %}achievementov
				    {% endif %}
				</td>
			    
				<td><span class="badge">{{ dict.countdone }}</span>
				    {% if dict.countdone == 1 %}achievement
				    {% elif dict.countdone >= 2 and dict.countdone <= 4 %}achievementy
				    {% else %}achievementov
				    {% endif %}
				</td>
			    </tr>
			    {% endfor %}
			    </tbody>
			</table>
		    </div>
		</div>

		{% if user.is_authenticated %}
		<div class="tab-pane" id="friends">
		    <div class="span10" style="margin-left:20px;">
			<h3>Moji priatelia</h3>
			
			<script type="text/javascript">

			    function hide_friends_users_ajax(data) {
				$('.friends_user_row').css('display', 'none');
				
				var splitList = data.users.split(',');
				if (splitList.length == 1) {
				    $('#friends_no_users').css('display','block');
				    $('#friends_user_table').css('display','none');
				} else {
				    $('#friends_no_users').css('display','none');
				    $('#friends_user_table').css('display','table');
				    for (var i = 0; i < splitList.length; i++) {
					$('#friends_row_' + splitList[i]).css('display', 'table-row');
				    }
				}
			    }

			    $(document).ready(function() {
				$('#friends_search_user').keyup(function() {
				    Dajaxice.accounts.filter_friends_advanced(hide_friends_users_ajax, {'text':$('#friends_search_user').val(), 'min_points':'0'});
				});
				$('#friends_search_points').keyup(function() {
				    var value = $('#friends_search_points').val();
				    if (value == '' ) {value = '0'}
				    Dajaxice.accounts.filter_friends_advanced(hide_friends_users_ajax, {'text':$('#friends_search_user').val(), 'min_points':value});
				});
			    });
			</script>
			
			<div class="form-inline pull-right" style="margin-left: 10px; margin-top:-50px;" action="">
            
			    <div class="row-fluid">
				<div id="friends_advanced_search" class="collapse pull-right" style="margin-bottom:10px;margin-top:-10px;">
				    <div class="input-prepend input-append">
					<span class="add-on">Nazbieral aspoň</span>
					<input id="friends_search_points" type="text" placeholder="0" class="input-mini" value="0">
					<span class="add-on">bodov</span>
				    </div>
				</div>
			    </div>
			
			    <div class="input-prepend input-append">
				<span class="add-on"><i class="icon-search"></i></span>
				<input  id="friends_search_user" autocomplete="off" type="text" class="search-query" placeholder="Hľadať používateľa...">
				
				<span class="btn" data-toggle="collapse" data-target="#friends_advanced_search">Rozšírené</span>
			    </div>
			</div>
			
			<br />
			
			<p id="friends_no_users" style="display:none;">Nenašli sa priatelia.</p>
			
			<script type="text/javascript">
			    $(document).ready(function(){ 
				$("#friends_user_table").tablesorter(); 
			    }); 
			</script>
			
			<table id="friends_user_table" class='table tablesorter table-striped table-bordered'>
			    <thead>
				    <tr>
					<th>Používateľ</th>
					<th>Počet bodov</th>
					<th>Vytvorené</th>
					<th>Splnené</th>
				    </tr>
			    <tbody>
			    {% for usr, dict in user_list.iteritems %}
			    {% if dict.friends and not user == usr.user %}
			    <tr class="friends_user_row" id="friends_row_{{usr.user.username}}" style="display:table-row;">
				<td><a href="{% url show_user user_id=usr.user.username %}">{{ usr.user.username }}</a>
				{% if user.is_authenticated and not user == usr.user %}
				    {% if not dict.friends %}
					<a href="{% url add_friend user_id=usr.user.username %}">
					    <button class="btn btn-mini"><i class="icon-plus-sign icon-white"></i></button>
					</a>
				    {% else %}
					<a href="{% url remove_friend user_id=usr.user.username %}">
					    <button class="btn btn-mini pull-right"><i class="icon-remove-sign icon-white"></i></button>
					</a>
				    {% endif %}
				    <a href="{% url message_friend user_id=usr.user.username %}">
					<button class="btn btn-mini"><i class="icon-envelope icon-white"></i></button>
				    </a>
				{% endif %}
				</td>
				<td><span class="badge badge-info">{{ usr.user_points }}</span>
				    {% if usr.user_points == 1 %}bod
				    {% elif usr.user_points >= 2 and usr.user_points <= 4 %}body
				    {% else %}bodov
				    {% endif %}
				</td>
				
				<td><span class="badge">{{ dict.countmade }}</span>
				    {% if dict.countmade == 1 %}achievement
				    {% elif dict.countmade >= 2 and dict.countmade <= 4 %}achievementy
				    {% else %}achievementov
				    {% endif %}
				</td>
			    
				<td><span class="badge">{{ dict.countdone }}</span>
				    {% if dict.countdone == 1 %}achievement
				    {% elif dict.countdone >= 2 and dict.countdone <= 4 %}achievementy
				    {% else %}achievementov
				    {% endif %}
				</td>
			    </tr>
			    {% endif %}
			    {% endfor %}
			    </tbody>
			</table>
		    </div>
		</div>

		{% endif %}
		
	    </div>
	</div>
    </div>

{% else %}
    <p> Nie sú dostupní žiadni užívatelia. </p>
{% endif %}

    
{% endblock %}